<template>
  <!--冒号表示绑定属性，@表示绑定事件-->
  <a-row class="login">
    <a-col :span="8" :offset="8" class="login-main">
      <h1 style="text-align: center"><rocket-two-tone />登录</h1>

      <a-form
          :model="loginForm"
          name="basic"
          autocomplete="off"
      >
        <a-form-item
            label=""
            name="mobile"
            :rules="[{ required: true, message: '请输入手机号!' }]"
        >
          <a-input v-model:value="loginForm.mobile" placeholder="手机号"/>
        </a-form-item>

        <a-form-item
            label=""
            name="code"
            :rules="[{ required: true, message: '请输入验证码!' }]"
        >
          <a-input v-model:value="loginForm.code" placeholder="验证码">
            <template #addonAfter>
              <a @click="sendCode">获取验证码</a>
            </template>
          </a-input>
          <!--<a-input v-model:value="loginForm.code" placeholder="验证码"/>-->
        </a-form-item>

        <a-form-item>
          <a-button type="primary" block @click="login">登录</a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import { RocketTwoTone } from "@ant-design/icons-vue";
import axios from "axios";
import { notification } from "ant-design-vue";
// 实现多个路由间的跳转、多个路由之间的交互使用useRouter，如果获取当前路由的地址、参数等用useRoute
import { useRouter } from "vue-router";
import store from "@/store";

export default defineComponent({
  name: "login-view",
  components: {
    RocketTwoTone,
  },
  setup() {
    const router = useRouter();
    // 使用reactive/ref声明响应式变量,一般来说，使用ref用来声明基本的数据类型，使用reactive用来声明对象或对象数组
    // 双向绑定：修改变量值则元素展现的值会变化；反过来，用户操作元素也会是script里的变量值发生变化。
    const loginForm = reactive({
      mobile: '18888888888',
      code: '',
    });
    const sendCode = () => {
      axios.post("/train-member/member/send-code", {
        mobile:loginForm.mobile
      }).then(response => {
        let data = response.data;
        if (data.success) {
          notification.success({description: "发送验证码成功！"});
          loginForm.code = 666666;
        } else {
          notification.error({description: data.message})
        }
      })
    };
    const login = () => {
      axios.post("/train-member/member/login", loginForm).then(response => {
        let data = response.data;
        if (data.success) {
          notification.success({description: "登录成功！"});
          router.push("/welcome");
          // 提交到setMember方法，带上参数（方法中的state参数是默认内置的，所以只需要带另一个参数member）
          store.commit("setMember", data.content);
        } else {
          notification.error({description: data.message})
        }
      })
    };
    // 哪些东西需要被html用到，就需要return储去
    return {
      loginForm,
      sendCode,
      login,
    };
  },
});
</script>

<style>
.login-main h1 {
  font-size: 25px;
  font-weight: bold;
}
.login-main {
  margin-top: 100px;
  padding: 30px 30px 20px;
  border: 2px solid grey;
  border-radius: 10px;
  background-color: #fcfcfc;
}
</style>